<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<script setup lang="ts">
  import { useRouter, useRoute } from 'vue-router'
  import { useMenuStore } from '@/store/menu/index'
  import { storeToRefs } from 'pinia'
  import { computed, ref, watch } from 'vue'
  import { useClusterStore } from '@/store/cluster'
  import type { ClusterStatusType } from '@/api/cluster/types'

  const router = useRouter()
  const route = useRoute()
  const menuStore = useMenuStore()
  const clusterStore = useClusterStore()
  const routeParamsLen = ref(0)
  const openKeys = ref<string[]>(['clusters'])
  const { siderMenuSelectedKey, headerSelectedKey, siderMenus, routePathFromClusters } = storeToRefs(menuStore)
  const { clusters, clusterCount } = storeToRefs(clusterStore)

  const showCreateClusterBtn = computed(() => headerSelectedKey.value === '/cluster-manage')
  const selectMenuKeyFromClusters = computed(() => siderMenuSelectedKey.value.includes(routePathFromClusters.value))
  const clusterStatus = computed(
    (): Record<ClusterStatusType, string> => ({
      1: 'success',
      2: 'error',
      3: 'warning'
    })
  )

  watch(
    () => route,
    (newRoute) => {
      const { params, path, meta } = newRoute
      routeParamsLen.value = Object.keys(params).length
      if (path.includes(routePathFromClusters.value) && routeParamsLen.value > 0 && clusterCount.value > 0) {
        const cluster = clusters.value.find((v) => `${v.id}` === params.id)
        cluster && (siderMenuSelectedKey.value = `${routePathFromClusters.value}/${cluster.name}/${cluster.id}`)
      } else {
        siderMenuSelectedKey.value = meta.activeMenu ?? path
      }
    },
    {
      deep: true,
      immediate: true
    }
  )

  const toggleActivatedIcon = (menuItem: { key: string; icon: string }) => {
    const { key, icon } = menuItem
    const matchedRouteFromClusters = selectMenuKeyFromClusters.value && routeParamsLen.value > 0
    return key === siderMenuSelectedKey.value || (matchedRouteFromClusters && key === 'clusters')
      ? `${icon}_activated`
      : icon
  }

  const addCluster = () => {
    router.push({ name: 'CreateCluster' })
  }
</script>

<template>
  <a-layout-sider class="sider">
    <a-menu
      v-model="openKeys"
      :selected-keys="[siderMenuSelectedKey]"
      mode="inline"
      @select="({ key }) => menuStore.onSiderClick(key)"
    >
      <template v-for="menuItem in siderMenus" :key="menuItem.path">
        <a-sub-menu v-if="menuItem.name === 'Clusters'" :key="menuItem.path">
          <template #icon>
            <svg-icon
              style="height: 16px; width: 16px"
              :name="
                toggleActivatedIcon({
                  key: (menuItem.redirect as string) || menuItem.path,
                  icon: menuItem.meta?.icon || ''
                })
              "
            />
          </template>
          <template #title>
            <span>{{ $t(menuItem.meta!.title!) }}</span>
          </template>
          <a-menu-item
            v-for="child in clusters"
            :key="`${routePathFromClusters}/${child.name}/${child.id}`"
            :title="child.displayName"
          >
            <template #icon>
              <div class="cluster-status">
                <status-dot :size="8" :color="clusterStatus[child.status as ClusterStatusType] as any" />
              </div>
            </template>
            <div>
              <span>{{ child.displayName }}</span>
            </div>
          </a-menu-item>
        </a-sub-menu>
        <template v-else>
          <a-menu-item v-if="!menuItem.meta?.hidden" :key="menuItem.redirect">
            <template #icon>
              <svg-icon
                style="height: 16px; width: 16px"
                :name="toggleActivatedIcon({ key: menuItem.redirect as string, icon: menuItem.meta?.icon || '' })"
              />
            </template>
            <span>{{ $t(menuItem.meta!.title!) }}</span>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
    <div v-if="showCreateClusterBtn">
      <a-divider />
      <div class="create-option">
        <a-button type="primary" ghost @click="addCluster">
          <div>
            <label>{{ $t('menu.create') }}</label>
          </div>
        </a-button>
      </div>
    </div>
  </a-layout-sider>
</template>

<style scoped lang="scss">
  .cluster-status {
    height: 10px;
    margin-inline: 7px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  @mixin reset-sider-menu {
    width: 100%;
    border-radius: 0;
    padding: 0 0 0 14px !important;
    margin: 4px 0 0 0 !important;
  }
  .sider {
    width: $layout-header-height;
    background: $layout-sider-bg-color;
    overflow: auto;

    :deep(.ant-menu-submenu-title) {
      @include reset-sider-menu();
    }

    :deep(.ant-menu-item) {
      @include reset-sider-menu();
    }

    :deep(.ant-menu-item-selected) {
      border-right: 2px solid $color-primary;
    }

    .create-option {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-bottom: $space-lg;
      button {
        width: 160px;
        @include flexbox($align: center, $justify: center);
        label {
          cursor: pointer;
        }
      }
    }
  }
</style>
